<template name="swiperlist">

	<view class="swiperlist-content">

			<!-- 图文 -->
			<block v-if="show==0">
				<view class="swiper-box-style">
					
					<view class="swiper-box-item" v-for="(item,index) in list" :key='index'>
						
						<view class="item-icon" v-if="tw==0">
							<image :src="item.image" mode=""></image>
						</view>

						<view class="item-icon" v-if="tw==1">
							<image :src="item.sku_image" mode=""></image>
						</view>

						<view class="item-title" v-if="tw==0">{{item.title}}</view>
						<view class="item-title" v-if="tw==1">{{item.sku_name}}</view>

						<view class="item-user" >
<!-- 							<view class="user-Info">
								<view class="user-icon">
									<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/pinglun.png" mode=""></image>
								</view>
								<view class="user-name">promise</view>
							</view> -->
<!-- 							<view class="user-hot" >
								<view class="hot-Icon">
									<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/pinglun.png" mode=""></image>
								</view>
								<view class="hot-num">{{item.love_num}}</view>
							</view> -->
						</view>

						<view class="item-user" v-if="tw==1">
							<view class="user-Info">
								<view class="user-name-Two">￥{{item.price}}</view>
							</view>
							<view class="user-hot">
								<view class="hot-num-Two">购买</view>
							</view>
						</view>

					</view>
				</view>
			</block>
			<!-- 视频 -->
<!-- 			<block v-if="show==1">
				<view class="swiper-box-style">
					<view class="swiper-box-item" >
						<view class="player-icon">
							<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/play_img.png" mode=""></image>
						</view>
						<view class="item-icon">
							<image src="" mode=""></image>
						</view>
						<view class="item-title"></view>
						<view class="item-user">
							<view class="user-Info">
								<view class="user-icon">
									<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/user.png" mode=""></image>
								</view>
								<view class="user-name"></view>
							</view>
							<view class="user-hot">
								<view class="hot-Icon">
									<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/pinglun.png" mode=""></image>
								</view>
								<view class="hot-num"></view>
							</view>
						</view>
					</view>
					<view style="height: 100rpx;"></view>
				</view>
			</block> -->
			<block v-if="show==2">
				<view class="userItem">
					<view class="bgw">
						<view class="user-info-bos">
							<view class="user-pot">
								<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/pinglun.png" mode=""></image>
							</view>
							<view class="user-names">憨憨</view>
						</view>
						<view class="link-btns" >
							+关注
						</view>
	<!-- 					<view class="link-btns" >
							已关注
						</view> -->
					</view>
				</view>
			</block>
	</view>
</template>
<script>
	// import $Axios from '@/common/js/request/http.js'
	// import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	// import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
	export default {
		name: "swiperlist",
		// mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				// mescroll: null,
				// downOption: {
				// 	auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				// },
				// upOption: {
				// 	auto: false, // 不自动加载
				// 	noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				// 	empty: {
				// 		icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
				// 		tip: '~ 空空如也 ~' // 提示
				// 	}
				// },
				list:[],
				// listTwo:[],
				// listThree:[],
				// listFour:[],
			};
		},
		//属性
		props: {
			show: {
				// 返回事件判断
				type: Number,
				default: 0
			},
			tw: {
				// 返回事件判断
				type: Number,
				default: 0
			},
			tabIndex: {
				// 返回事件判断
				type: Number,
				default: 0
			},
			keyText:{
				type:String,
				default:''
			},
			pageis:{
				type: Number,
				default: 0
			}
		},
		created() {

		},
		mounted() {
			this.tabIndex = 0
			if(this.tabIndex == 0){
				this.getContentSearchList(1,10)
			}else if(this.tabIndex == 1){
				this.getGoodsSearchList(1,10)
			}else if(this.tabIndex == 2){
				this.getMemberSearchList(1,10)
			}else if(this.tabIndex == 3){
				this.getShopSearchList(1,10)
			}
		},
		methods: {
			getContentSearchList(page,pages_size){
				this.$request.search({
					keyword:this.keyText,
					pages:page,
					pages_size:pages_size
				}).then(res=>{
					if(res.data.list.length!=0){
						this.list = this.list.concat(res.data.list)
					}
				})
			},
			getGoodsSearchList(page,pages_size){
				this.$request.searchElse({
					keyword:this.keyText,
					pages:page,
					pages_size:pages_size
				}).then(res=>{
					if(res.data.list.length!=0){
						this.list = this.list.concat(res.data.list)
					}
				})
			},
			getMemberSearchList(page,pages_size){
				this.$request.getMemberSearchList({
					keyword:this.keyText,
					pages:page,
					pages_size:pages_size
				}).then(res=>{
					if(res.data.list.length!=0){
						this.list = this.list.concat(res.data.list)
					}
				})
			},
			getShopSearchList(page,pages_size){
				this.$request.getShopSearchList({
					keyword:this.keyText,
					pages:page,
					pages_size:pages_size
				}).then(res=>{
					if(res.data.list.length!=0){
						this.list = this.list.concat(res.data.list)
					}
				})
			},
			// // 初始化
			// mescrollInit(e) {
			// 	this.mescroll = e;
			// },
			// /*下拉刷新的回调 */
			// downCallback(e) {
			// 	// console.log(e)
			// 	this.mescroll.resetUpScroll();
			// },
			// /*上拉加载的回调 */
			// upCallback(page) {
			// 	this.mescroll.endSuccess(page.num);
			// },
			// toDetail(item){
			// 	console.log(item)
			// 	if(this.tw == 0){
			// 		this.$Router.push({
			// 			path:"/shopPages/goods/detail",
			// 			query:{
			// 				sku_id:item.sku_id
			// 			}
			// 		})
			// 	}else{
			// 		this.$Router.push({
			// 			path:"/publicPages/details/detail",
			// 			query:{
			// 				content_id:item.id
			// 			}
			// 		})
			// 	}
			// },
			// toLive(item){
			// 	console.log(item)
			// 	this.$Router.push({
			// 		path:"/livePages/video/video",
			// 		query:{
			// 			video_id:item.id
			// 		}
			// 	})
			// }
		}
	}
</script>
<style lang="scss" scoped>
	/deep/.mescroll-uni {
	 height: 100% !important;
	}
	image {
		width: 100%;
		height: 100%;
	}

	.swiperlist-content {
		width: 100%;

		.swiper-box-style {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-top: 20rpx;
		}

		.swiper-box-item {
			width: 340rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding-bottom: 20rpx;
			margin-left: 22rpx;
			margin-bottom: 22rpx;
			position: relative;

			.player-icon {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 18px;
				height: 18px;
				z-index: 9999;
			}

			.item-icon {
				width: 340rpx;
				height: 340rpx;
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}

			.item-icon image {
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}

			.item-title {
				width: 317rpx;
				margin: 0 auto;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				padding-top: 20rpx;
			}

			.item-user {
				width: 317rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.user-Info {
					display: flex;
					align-items: center;

					.user-icon {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}

					.user-icon image {
						border-radius: 50%;
					}

					.user-name {
						margin-left: 10rpx;
						max-width: 120rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.user-hot {
					display: flex;
					align-items: center;

					.hot-Icon {
						width: 10px;
						height: 13px;
						margin-right: 5px;
					}

					.hot-num {
						max-width: 80rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 20rpx;
					}
				}

			}
		}
	}

	.user-name-Two {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF364E;
	}

	.hot-num-Two {
		width: 72rpx;
		height: 38rpx;
		background: linear-gradient(90deg, #FF6744, #FD3B5C);
		border-radius: 19rpx;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 38rpx;
	}
	
	.userItem{
		width: 100%;
		background-color: #FFFFFF;
		.bgw{
			width: 702rpx;
			height: 120rpx;
			background: rgba(244, 244, 244, 0);
			box-shadow: 0rpx 1rpx 0rpx 0rpx #F4F4F4;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
		}
		.user-info-bos{
			display: flex;
			align-items: center;
			.user-pot{
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}
			.user-names{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF4840;

			}
		}
	}
	
	.link-btns {
		width: 120rpx;
		height: 56rpx;
		background: linear-gradient(90deg, #FF7124, #FF364E);
		border-radius: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
	}
</style>
